<template>
  <div class="home-container">
    <div v-for="section in sections" :key="section.type" :id="section.type" class="case-section">
      <h2 class="section-title">{{ section.title }}</h2>
      <el-row :gutter="20">
        <el-col :span="6" v-for="item in section.cases" :key="item.path">
          <el-card class="case-card" @click="handleCardClick(item.path)">
            <img :src="item.image" class="case-image" />
            <div class="case-title">{{ item.title }}</div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

interface CaseItem {
  title: string
  path: string
  image: string
}

interface Section {
  type: string
  title: string
  cases: CaseItem[]
}

const sections = ref<Section[]>([
  {
    type: 'button',
    title: '按钮组件',
    cases: [
      {
        title: '按钮案例',
        path: '/button',
        image: 'https://element-plus.org/images/button.png'
      }
    ]
  },
  {
    type: 'form',
    title: '表单组件',
    cases: [
      {
        title: '表单案例',
        path: '/form',
        image: 'https://element-plus.org/images/form.png'
      }
    ]
  },
  {
    type: 'table',
    title: '表格组件',
    cases: [
      {
        title: '表格案例',
        path: '/table',
        image: 'https://element-plus.org/images/table.png'
      }
    ]
  }
])

const handleCardClick = (path: string) => {
  router.push(path)
}
</script>

<style scoped>
.home-container {
  padding: 20px;
}

.case-section {
  margin-bottom: 40px;
  scroll-margin-top: 20px;
}

.section-title {
  margin-bottom: 20px;
  font-size: 24px;
  color: #333;
}

.case-card {
  margin-bottom: 20px;
  cursor: pointer;
  transition: all 0.3s;
}

.case-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
}

.case-image {
  width: 100%;
  height: 160px;
  object-fit: cover;
}

.case-title {
  margin-top: 10px;
  font-size: 16px;
  text-align: center;
  color: #333;
}
</style>